<template>
  <div>
      <router-link class="info" :to="`/user_edit?id=${$route.query.id}`">
          <div class="avatar">
              <van-image
                width="100%"
                height="100%"
                round
                :src="userinfo.head_img"
              />
              
          </div>
          <div class="center">
              <p class="username">
                  <i class="iconfont iconxingbienan" v-if="userinfo.gender"></i>
                  <i class="iconfont iconxingbienv" v-else></i>
                  <span>{{userinfo.nickname}}</span>
              </p>
              <p class="data">{{userinfo.create_date |formatDate}}</p>
          </div>
          <i class="iconfont iconjiantou1"></i>
      </router-link>
      <MyCell title="我的关注" value="关注的用户" to="/user_follow"></MyCell>
      <MyCell title="我的跟贴" value="跟帖/回复" to="/user_comment"></MyCell>
      <MyCell title="我的收藏" value="文章/视频" to="/user_star"></MyCell>
      <MyCell title="设置" @click="cellFn"></MyCell>
      <MyButton @click="loginFn">退出</MyButton>
  </div>
</template>

<script>
import MyCell from '../components/MyCell.vue'
import MyButton from'../components/MyButton.vue'
import {userDetailAPL} from '../apis/user'
import { removeToken,removeUserId } from '../utils/localData'
import requser from '../utils/request'
export default {
   components:{
       MyCell,
       MyButton,
   },
   data () {
       return {
           userinfo:{}
       }
   },
   methods:{
       cellFn(){
           console.log('我不挑')
       },
       loginFn(){
           this.$dialog.confirm({
             title: '是否退出？',
           })
             .then(() => {
               // on confirm
            //    console.log("点击了确认")
               // 清除token
               removeToken();
               // 跳转到首页
          //  .push()      跳转到某个页面 - 点击后退可以返回个人中心
          //  .replace()   替换成某个页面 - 点击后退就不能返回个人中心了。
            //    this.$router.push({path:'/login'})
            this.$router.replace({path:'/'})
             })
             .catch(() => { });
        }
  },
   async created () {
       const id=this.$route.query.id
      const res = await userDetailAPL(id)
      console.log(res)
    //   拼接后在复制给自己
      res.data.data.head_img=requser.defaults.baseURL+res.data.data.head_img;
      this.userinfo = res.data.data
      
   }
}
</script>

<style lang="less" scoped>
.info{
    height:120px;
    padding:0px 20px;
    display: flex;
    align-items: center;
    border-bottom: 5px solid #ddd;
    .avatar{
       width:80px;
       height:80px;
    //    background-color:green;
    //    border-radius:50%;
       
    }
    .center{
        flex:1;
        margin-left: 20px;
       .username{
           font-size:16px;
           margin-bottom: 5px;
           .iconxingbienan{
               color:aqua;
               margin-right: 5px;
           }
           .iconxingbienv{
               color: pink;
           }
       }
       .data{
           font-size:12px;
           color: rgb(167, 165, 165);
       }
    }
    .iconjiantou1{
       font-size:16px
    }
}
</style>